<template>
  <mu-bottom-sheet :open.sync="openFlag">
    <mu-slide-picker :slots="pickerSlots" @change="pickerChange" :values="pickerData"></mu-slide-picker>
  </mu-bottom-sheet>
</template>

<script>
  export default {
    name: "Dol-cascade-picker",
    props: {
      value: {type: Array, default: () => []},

      options: {type: Array, default: () => []},
      cascadeLevel: {type: Number, default: 3},
      slots: {type: Array},
    },
    data() {
      return {
        openFlag: false,

        dataMap: [],
        pickerSlots: [],
        pickData: [],
      }
    },
    computed: {
      pickerData() {
        let data = [], i;
        for(i = 0; i < this.pickerSlots.length; i++){
          data.push(this.value[i] || '请选择');
        }

        return data;
      },
    },
    methods: {
      open(){
        this.openFlag = true;
      },
      close(){
        this.openFlag = false;
      },
      formatterData() {
        let i;

        //初始化列数
        if (this.slots) {
          this.pickerSlots = this.slots;
        } else {
          for (i = 0; i < this.cascadeLevel; i++) {
            this.pickerSlots.push({width: '100%', textAlign: 'center'});
          }
        }

        //准备可选数据变量
        let level = this.pickerSlots.length;
        for (i = 0; i < level; i++) {
          this.pickData.push(this.value[i] || '请选择');

          if (i === 0) {
            this.dataMap[i] = ['请选择'];
          } else {
            this.dataMap[i] = {};
            this.dataMap[i]['请选择'.repeat(i)] = ['请选择'];
          }
        }

        //递归格式化数据
        this.options.forEach(l0 => {
          this.dataMap[0].push(l0.label);

          this.formatterChildrenData(1, l0);
        });

        //回填pickerSlots
        let totalLabel = '';
        for (i = 0; i < level; i++) {
          if (i === 0) {
            this.pickerSlots[i].values = this.dataMap[i];
          } else {
            this.pickerSlots[i].values = this.dataMap[i][totalLabel];
          }
          totalLabel += this.pickData[i];
        }
      },
      formatterChildrenData(curLevel, data, parentLabel = '') {
        let childrenArray = ['请选择'];
        data.children && data.children.forEach(c => {
          childrenArray.push(c.label);

          if (curLevel < this.pickerSlots.length - 1) {
            this.formatterChildrenData(curLevel + 1, c, parentLabel + data.label);
          }
        });
        this.dataMap[curLevel][parentLabel + '请选择'] = ['请选择'];
        this.dataMap[curLevel][parentLabel + data.label] = childrenArray;
      },
      pickerChange(value, index) {
        let i, totalKey = '';
        this.pickData[index] = value;
        for(i = 0; i <= index; i++){
          totalKey += this.pickData[i];
        }
        for(i = index + 1; i < this.pickerSlots.length; i++){
          this.pickerSlots[i].values = this.dataMap[i][totalKey];
          this.pickData[i] = this.dataMap[i][totalKey][0];
          totalKey += this.pickData[i];
        }

        let _value = [];
        for(i = 0; i < this.pickerSlots.length; i++){
          if(this.pickData[i] !== '请选择'){
            _value.push(this.pickData[i]);
          }else{
            break;
          }
        }
        this.$emit('change', _value, value, index);
        this.$emit('input', _value);
      },
    },
    created() {
      this.formatterData();
    }
  }
</script>

<style scoped>

</style>
